<template>
  <view>
    <uni-fab
        ref="fab" :pattern="pattern"
        :content="content" :horizontal="horizontal"
        :vertical="vertical" :direction="direction"
        @trigger="trigger" />
  </view>
</template>

<script>
import {mapActions, mapState} from "vuex";
import language from "../../api/language";
export default {
  name: "seg-right-button",
  computed:{
    ...mapState("app", ['showBigImgArea', 'segPanelStatus', 'nowLanguage'])
  },
  watch: {
    showBigImgArea(newVal, oldVal){
      this.content[1].active = newVal
    },
    "segPanelStatus.showRightPanel"(newVal, oldVal){
      this.content[0].active = newVal
    },
    nowLanguage(newVal, oldVal){
      this.changeLanguage(newVal)
    }
  },
  mounted() {
    this.content[0].active = this.segPanelStatus.showRightPanel
    this.content[1].active = this.showBigImgArea
    this.changeLanguage(this.nowLanguage)
  },
  data(){
    return {
      title: 'uni-fab',
      directionStr: '垂直',
      horizontal: 'right',
      vertical: 'top',
      direction: 'vertical',
      pattern: {
        color: '#7A7E83',
        backgroundColor: '#fff',
        selectedColor: '#007AFF',
        buttonColor: '#00CD66',
        iconColor: '#fff'
      },
      is_color_type: false,
      content: [{
        iconPath: '/static/设置.png',
        selectedIconPath: '/static/设置.png',
        text: '设置',
        active: false
      }, {
        iconPath: '/static/放大.png',
        selectedIconPath: '/static/缩小.png',
        text: '全屏',
        active: false
      }, {
        iconPath: '/static/CHI.png',
        selectedIconPath: '/static/ENG.png',
        text: '中文',
        active: false
      }]
    }
  },
  methods: {
    ...mapActions({
      setRightMenu: 'app/setSegPanelState',
      setBigArea: 'app/setShowBigImgArea',
      setLanguage: 'app/setNowLanguage'
    }),
    getTranslate(posIndex){
      let langDict = language.getTranslate(language.segRightButton)
      if (posIndex === 0){
        return langDict.setting
      }else if(posIndex === 1){
        return langDict.full
      }else if(posIndex === 2){
        return langDict.lang
      }
    },
    changeLanguage(val){
      if(val === 'CHI'){
        this.content[2].text = '中文'
        this.content[2].active = false
      }else if(val === 'ENG'){
        this.content[2].text = 'ENG'
        this.content[2].active = true
      }
      this.content[0].text = this.getTranslate(0)
      this.content[1].text = this.getTranslate(1)
    },
    trigger(e) {
      let index = e.index
      if (index === 0){
        this.setRightMenu({
          showRightPanel: true
        })
      }else if(index === 1){
        this.setBigArea(!this.showBigImgArea)
      }else if(index === 2){
        if (this.nowLanguage === 'CHI'){
          this.setLanguage('ENG')
        }else{
          this.setLanguage('CHI')
        }
      }

      // 原始参考
      // this.content[e.index].active = !e.item.active
      // uni.showModal({
      //   title: '提示',
      //   content: `您${this.content[e.index].active ? '选中了' : '取消了'}${e.item.text}`,
      //   success: function(res) {
      //     if (res.confirm) {
      //       console.log('用户点击确定')
      //     } else if (res.cancel) {
      //       console.log('用户点击取消')
      //     }
      //   }
      // })
    },
    fabClick() {
      uni.showToast({
        title: '点击了悬浮按钮',
        icon: 'none'
      })
    }
  }
}
</script>

<style scoped>

</style>
